<!--
 * @Author: byron
 * @Date: 2022-01-09 22:55:30
 * @LastEditTime: 2022-01-22 17:16:45
-->
<template>
    <div class="login">
        <Dialog
            :visible="visible"
            width="384px"
            :title="true"
            @handleClose="handleClose"
        >
            <template slot="title">
                <div class="logo-warp">
                    <Logo />
                </div>
                <p class="title" style="padding: 0 10px">账号密码登录</p>
            </template>
            <template slot="body">
                <div class="login-form">
                    <label for=""
                        ><input
                            id="username"
                            type="text"
                            placeholder="手机/邮箱"
                    /></label>
                    <label for="">
                        <input
                            id="password"
                            type="text"
                            placeholder="输入密码"
                        />
                    </label>
                    <div class="btn-warp">
                        <button>登录</button>
                        <p @click="forgetBtn">忘记密码</p>
                    </div>
                </div>
            </template>
        </Dialog>
    </div>
</template>

<script>
import Dialog from '@/components/diglog.vue'
import Logo from '@/base/logo/logo.vue'
export default {
    components: { Dialog, Logo },
    props: {
        visible: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            width: '30%',
        }
    },
    methods: {
        forgetBtn() {
            this.$message({
                type: 'info',
                message: '该功能尚未开发',
            })
        },
        handleClose(e) {
            console.log(e)
            this.$emit('handleClose', e)
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang="less" scoped>
.login-form {
    padding: 10px;
    label {
        display: flex;
        margin-bottom: 20px;
        input {
            outline: none;
            padding: 8px 12px;
            width: 100%;
            border: 1px solid #c2bcbc;
            border-radius: 8px;
            background-color: #fff;
            line-height: 22px;
        }
        input:focus {
            border-color: #007aff;
            box-shadow: rgba(0, 122, 255, 0.3) 0px 0px 0px 2px;
        }
    }

    .btn-warp {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        position: relative;
        button {
            position: relative;
            width: 100%;
            height: 40px;
            border-radius: 8px;
            outline: none;
            border: none;
            text-align: center;
            cursor: pointer;
            background-color: #333;
            color: #fff;
        }
        p {
            width: 100%;
            display: inline-block;
            text-align: right;
            margin-top: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        p:hover {
            text-decoration: underline;
        }
    }
}
.logo-warp {
    height: 110px;
}
.title {
    display: inline-block;
    width: 100%;
    text-align: left;
    margin-top: 10px;
}
</style>
